<template>
  <div class="login">

    <div class="ms-logo"></div>

    <div class="ms-title">友鱼科技联运管理系统</div>
    <div class="ms-login">
      <div class="ms-field">
        <div class="mt-cell-wrapper">
          <div class="mt-cell-title">
            <span class="mt-cell-text">用户名</span>
          </div>
          <div class="mt-cell-value">
            <input placeholder="请输入用户名" type="text" name="username" v-model="username" class="mint-field-core">
          </div>
        </div>
      </div>
      <div class="ms-field">
        <div class="mt-cell-wrapper">
          <div class="mt-cell-title">
            <span class="mt-cell-text">密&nbsp;&nbsp;码</span>
          </div>
          <div class="mt-cell-value">
            <input placeholder="请输入密码" type="password" name="username" v-model="password" class="mint-field-core">
          </div>
        </div>
      </div>
      <mt-button type="primary" size="small" class="submit-btn" @click.native="handleClick">提交</mt-button>
    </div>
  </div>
</template>

<script>

  export default {
      name: 'login',
      data () {
          return {
              username:'',
              password:''
          }
      },
      methods:{
          handleClick(){
              const self = this;

              if(!self.username){
                  this.$toast({
                      message: '用户名称不能为空',
                      duration:2000
                  });
              }else{
                  if(!self.password){
                      this.$toast({
                          message: '密码不能为空',
                          duration:2000
                      });
                  }
              }



              if(self.username != '' && self.password != ''){
                  var url = this.$global.host + '/login?username='+self.username+'&password='+self.password;

                  this.$axios.post(url,{}).then(function(res){

                      if(res.data.code == 200){
                          localStorage.setItem('ms_username',self.username);
                          localStorage.setItem('rq_data',JSON.stringify(res.data.data));
                          self.$router.push('/index');
                      }else{
                          self.$toast({
                              message:res.data.message,
                              duration:2000
                          });
                      }

                  }).catch(function(ret){

                      self.$toast({
                          message:ret.message,
                          duration:2000
                      });

                  });
              }

          }
      }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .login{
    position: relative;
    width:100%;
    height:100%;
    background:#fff;
    overflow: hidden;
    overflow-y: scroll;
  }

  .ms-logo{
    width:100%;
    height:47px;
    background:url(../../assets/logo_youyu.png) no-repeat center top ;
    margin-top:60px;

  }
  .ms-title{
    width:100%;
    text-align: center;
    font-size:26px;
    color: #000;
    margin-top:40px;
  }
  .ms-login{
    width:100%;
    box-sizing: border-box;
    padding:10px;
    border-radius: 5px;
    background: #fff;
    overflow: hidden;
    margin-top:60px;
    border:0;

  }

  .ms-field{
    background-color: #fff;
    box-sizing: border-box;
    color: inherit;
    min-height: 48px;
    display: flex;
    overflow: hidden;
    position: relative;
    text-decoration: none;
  }

  .mt-cell-wrapper{
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    box-sizing: border-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 16px;
    line-height: 1;
    min-height: inherit;
    overflow: hidden;
    padding: 0 10px;
    width: 100%;
  }

  .mt-cell-title{
    width: 105px;
    -webkit-box-flex: 0;
  }
  .mt-cell-value{
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    color: inherit;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-bottom:1px solid #b8bbbf;

  }

  .submit-btn{
    width: 80px;
    height: 40px;
    margin: 0 auto;
    margin-top: 40px;
  }
</style>
